<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>最简单的轮播效果</title>
        <link rel="stylesheet"
            href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div>
            <div class="header" style="width: 100%;">
                <nav class="navbar navbar-default navbar-fixed-top"
                    role="navigation">
                    <div class="navbar-header" style="margin-left:
                        0px;padding-right: -100;padding-left: 35px;padding-top:
                        15px;">
                        <span style="color: #eaeff4;">贵州省民政厅</span>
                        <p style="font-size: 10px; color: #eaeff4;">DEPARTMENT
                            OF CIVIL AFFAIRS OF GUIZHOU PROVINCE</p>
                    </div>
                    <div class="collapse navbar-collapse"
                        id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <div style="margin-left: 20px;">
                                    <button class="dropbtn" style="background:
                                        #3e4edd;">首页</button>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">业务图谱</button>
                                    <div class="dropdown-content">
                                        <a href="#">图谱可视化</a>
                                        <a href="#">本体管理</a>
                                        <a href="#">实体管理</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">民政智库</button>
                                    <div class="dropdown-content">
                                        <a href="#">文件管理</a>
                                        <a href="#">知识检索</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">数据管理</button>
                                    <div class="dropdown-content">
                                        <a href="#">元数据管理</a>
                                        <a href="#">主数据管理</a>
                                        <a href="#">安全中心</a>
                                        <a href="#">数据治理</a>
                                        <a href="#">多维分析</a>
                                        <a href="#">任务调度</a>
                                        <a href="#">数据集成</a>
                                        <a href="#">智能标注</a>
                                        <a href="#">实时流分析</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">...</button>
                                    <div class="dropdown-content">
                                        <div style="display: flex;
                                            flex-direction: row;
                                            justify-content:flex-start; width:
                                            240px;">
                                            <div>
                                                <button class="self-button">数据超市</button>
                                            </div>
                                            <div class="dropright-content">
                                                <a href="#">元数据管理</a>
                                                <a href="#">主数据管理</a>
                                            </div>
                                        </div>
                                        <button class="self-button">领导驾驶舱</button>
                                        <button class="self-button">服务与支持</button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <div style="margin-left: 20px;">
                                    <button class="dropbtn"
                                        style="font-size:14px;">欢迎您，user</button>
                                </div>
                            </li>
                            <li>
                                <a class="self-icon" style="padding-bottom:
                                    24px;
                                    padding-top: 20px;">
                                    <span class="glyphicon glyphicon-bell"
                                        style="color:
                                        blanchedalmond;"></span>
                                </a>
                            </li>
                            <li>
                                <a class="self-icon" style="padding-bottom:
                                    24px;
                                    padding-top: 20px;">
                                    <span class="glyphicon glyphicon-cog"
                                        style="color:
                                        blanchedalmond;"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div class="middle">
                <div style="position:relative;width: 100%;">
                    <div class="box" id="box">
                        <div class="inner" style="text-align: center;">
                            <!--轮播图-->
                            <ul class="innerUl">
                                <li><a href="#"><img src="img/firstImg.jpg"
                                            alt=""></a></li>
                                <li><a href="#"><img src="img/secondImg.png"
                                            alt=""></a></li>
                            </ul>

                            <ol class="bar">

                            </ol>
                            <!--左右焦点-->
                            <div id="arr" >
                                <span id="left">
                                    <</span>
                                    <span id="right">
                                        >
                                    </span>
                                </div>

                            </div>
                        </div>

                        <div style="width: 100%; height: 620px;">
                            <div class="self-div">
                                <div style="position: absolute;">
                                    <h5 style="font-size: 25px; color: #FFFFFF;display: flex;">演示租户</h5>
                                    <h2 style="margin-top: 0px; font-size: 40px;
                                        color:
                                        #FFFFFF;">政务业务数据管理平台</h2>
                                    <span style="float: left;height: 50px;"><input
                                            style="width: 640px;height: 50px;
                                            font-size:
                                            20px; outline:none;margin-top: 20px;"
                                            placeholder="输入关键字搜索"></span>
                                    <span><button style="background: #4862fe;
                                            text-align:center;
                                            font-size: 20px;
                                            color: #fff;
                                            width: 100px;
                                            height: 50px;
                                            margin-top: 20px;
                                            border:none">搜索</button></span>
                                </div>
                                
                                <div style="position: absolute;
                                    text-align: center;
                                    display:flex;
                                    margin-top: 180px;">
                                    <ul >
                                    <li class="self-li" style="text-align:
                                        center;">
                                        <span>社会救助处</span>
                                        <img src="img/fire.png" style="height:
                                            16px;
                                            width: 16px;">
                                    </li>
                                    <li class="self-li" style="text-align:
                                        center;">
                                        <span>儿童福利处</span>
                                    </li>
                                    <li class="self-li">
                                        <span>社会组织管理局</span>
                                    </li>
                                    <li class="self-li">
                                        <span>社会事务处</span>
                                    </li>
                                    <li class="self-li">
                                        <span>规划财务处</span>
                                    </li>
                                </ul>
                                </div>

                            </div>
                            <div class="out-transboxs">
                                <div class="transbox">
                                    <span class="self-span">1076</span>
                                    <h5 class="self-h5">收集知识、政策文件</h5>
                                </div>
                                <div class="transbox">
                                    <span class="self-span">1</span>
                                    <h5 class="self-h5">开放API</h5>
                                </div>
                                <div class="transbox">
                                    <span class="self-span">1980</span>
                                    <h5 class="self-h5">业务实体</h5>
                                </div>
                                <div class="transbox">
                                    <span class="self-span">2277</span>
                                    <h5 class="self-h5">业务实体关系数</h5>
                                </div>
                                <div class="transbox">
                                    <span class="self-span">14</span>
                                    <h5 class="self-h5">知识图谱</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <script>
    /**
     *
     * @param id  传入元素的id
     * @returns {HTMLElement | null}  返回标签对象，方便获取元素
     */
    function my$(id) {
        return document.getElementById(id);
    }
 
    //获取各元素，方便操作
    var box=my$("box");
    var inner=box.children[0];
    var ulObj=inner.children[0];
    var list=ulObj.children;
    var olObj=inner.children[1];
    var arr=my$("arr");
    var imgWidth=inner.offsetWidth;
    var right=my$("right");
    var pic=0;
    //根据li个数，创建小按钮
    for(var i=0;i<list.length;i++){
        var liObj=document.createElement("li");
 
        olObj.appendChild(liObj);
        // liObj.innerText=(i+1);
        liObj.setAttribute("index",i);
 
        //为按钮注册mouseover事件
        liObj.onclick=function () {
            //先清除所有按钮的样式
            for (var j=0;j<olObj.children.length;j++){
                olObj.children[j].removeAttribute("class");
            }
            this.className="current";
            pic=this.getAttribute("index");
            // animate(ulObj,-pic*imgWidth);
            ulObj.style.left = -pic*imgWidth + "px";
        }
 
    }
 
 
    //设置ol中第一个li有背景颜色
    olObj.children[0].className = "current";
    //克隆一个ul中第一个li,加入到ul中的最后=====克隆
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
 
    var timeId=setInterval(onmouseclickHandle,5000);
    //左右焦点实现点击切换图片功能
    box.onmouseover=function () {
        arr.style.display="block";
        clearInterval(timeId);
    };
    box.onmouseout=function () {
        arr.style.display="none";
        timeId=setInterval(onmouseclickHandle,5000);
    };
 
    right.onclick=onmouseclickHandle;
    function onmouseclickHandle() {
        //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
        //所以,如果用户再次点击按钮,用户应该看到第二个图片
        if (pic == list.length - 1) {
            //如何从第6个图,跳转到第一个图
            pic = 0;//先设置pic=0
            ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
        }
        pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
        animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
        //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
        if (pic == list.length - 1) {
            //第五个按钮颜色干掉
            olObj.children[olObj.children.length - 1].className = "";
            //第一个按钮颜色设置上
            olObj.children[0].className = "current";
        } else {
            //干掉所有的小按钮的背景颜色
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current";
        }
    }
    left.onclick=function () {
        if (pic==0){
            pic=list.length-1;
            ulObj.style.left=-pic*imgWidth+"px";
        }
        pic--;
        animate(ulObj,-pic*imgWidth);
        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].removeAttribute("class");
        }
        //当前的pic索引对应的按钮设置颜色
        olObj.children[pic].className = "current";
    };
 
    //设置任意的一个元素,移动到指定的目标位置
    function animate(element, target) {
        clearInterval(element.timeId);
        //定时器的id值存储到对象的一个属性中
        element.timeId = setInterval(function () {
            //获取元素的当前的位置,数字类型
            var current = element.offsetLeft;
            //每次移动的距离
            var step = 10;
            //判断当前位置与想移到的位置 当前位置小于想移到的位置则+10 大于则-10
            step = current < target ? step : -step;
            //当前移动到位置
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                //清理定时器
                clearInterval(element.timeId);
                //直接到达目标
                element.style.left = target + "px";
            }
        }, 5);
    }
</script>
        </body>

        <style>
   * {
            margin: 0;
            padding: 0
        }
    .box {
            position:absolute;
            left:0;
            top:0;
            width: 100%;
            height: 600px;
           
        }
        .inner{
            width: 100%;
            height: 600px;
            position: relative;
            overflow: hidden;
           
        }
        .inner img{
            width: 100%;
            height: 600px;
            vertical-align: top
        }
        .innerUl {
            width: 1000%;
            position: absolute;
            list-style: none;
            left:0;
            top: 0;
            padding-left: 0px;
        }
        .inner li{
            float: left;
        }
 
        ol {
            position: absolute;
            height: 20px;
            right: 20px;
            bottom: 20px;
            text-align: center;
            padding: 5px;
            margin: 0 auto;
        }
        ol li{
            display: inline-block;
            box-sizing: border-box;
            width: 11px;
            height: 11px;
            border: 3px solid rgba(204, 204, 204, 0.2);
            border-radius: 15px;
            cursor: pointer; 
            margin-right: 5px;
        }
        ol .current{
            background-color: red;
        }
        #arr{
            display: none;
        }
        #arr span{
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #fff;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #000;
            opacity: 0.5;
            border: 1px solid #fff;
        }
        #arr #right {
            right: 5px;
            left: auto;
        }

    .footer-span {
        font-size: 14px;
        color: #a3a4a7;
    }

    .footer-span:hover {
        font-size: 14px;
        color: #3498ff;
        cursor:pointer;
    }

    .out-transboxs {
        margin-top: 260px;
        width: 100%;
        position: absolute;
        display: flex;
        text-align: center;
        justify-content: center;
    }
    .self-h5 {
        font-size: 19px; 
        color: #FFFFFF;
    }
    .wrapper {
        width: 100%;
        height: 310px;
        margin-top: 30px;
    }
    .wrapper ul {
        height: 310px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        text-align: center;
        }

        .wrapper ul li {
            list-style: none;
            height: 310px;
            margin-right: 20px;
        }

        .wrapper ul li:hover {
            border: 1px solid #1c4eff;
            border-radius: 8px;
        }

        .wrapper ul li:hover .circle{
            background-color:#1c4eff;     
        }

        .wrapper ul li:hover .li-p1{
            color:#1c4eff;     
        }

        .wrapper ul li:hover .li-p2{
            color:#1c4eff;     
        }
    .footer { 
        background-color: #313131;
        width: 100%; 
        height: 246px; 
        bottom: 0px;
    }
    .li3 {
        display: inline; 
        font-size: 16px;
        padding-top: 7px;
        padding-right: 20px;
        padding-bottom: 7px;
        padding-left: 20px;
        border: 2px solid #8da6ff;
        text-align: center;
        color: #1C4EFF;
    }
    .li-p2 {
        width: 150;height: 130; font-size: 16px; padding-left: 15px;padding-right: 15px;
    }
    .li-p1 {
        font-size:18px; font-size:18px;margin-top: 120px;
    }
    .li-div {
        border-radius: 8px;
        border:1px solid rgb(245, 233, 233);
        height: 310px; 
        width: 220px; 
        position: relative;
    }
    /* .li2 {
        display: inline; 
        height: 310px; 
        width: 220px; 
        margin-right: 20px;
    } */
     .circle{
        position: absolute;
        margin-left: 77px;
        margin-top: 35px;
         width: 66px;      
         height: 66px;     
         background-color:#488AFB;     
         border-radius: 50%;      
         -moz-border-radius: 50%;      
         -webkit-border-radius: 50%;    
        }
    .self-h3 {
        text-align: center; 
        width: 55px;
        border-bottom: 2px solid #FFD33B;
        border-bottom-width:5px;
        border-top-width: 0px;
    }
    #firstTab{
        cursor:pointer;
        color: #0073E8;
    }
    #secondTab:hover{
        cursor:pointer;
        color: #0073E8;
    }
    .self-span {
        font-size: 32px; 
        color: white;
    }
    .self-div {
    margin: auto;
    padding-top: 122px;
    width: 80%;
    }

    div.transbox {
        padding-top: 15px;
        background-color:hsla(0,0%,100%,.1);
        width: 186px;
        height: 120px;
        float: left;
        text-align: center;
    }

    div.transbox:hover {
        background-color: hsla(0,0%,100%,.2);
    }

    div.transbox:hover .self-h5{
        color: #53eeff;
    }

    div.transbox:hover .self-span{
        color: #53eeff;
    }

    .self-li {   
        line-height: 24px;
        margin-left: 20px;
        display: inline-block;  
        color: #FFF;
        border-radius: 10px;
        padding: 2px 8px;
        cursor: pointer;
    }

    .self-li:hover {
        background-color: #777;
    }
.navbar {
    top: 0px;
    background-color: #2e43b7;
    margin-bottom: 0px;
    border: none;
    z-index:3;
}
.self-img {
    height: 540px;
}
.self-icon {
    font-size: 17px;
    padding-bottom: 24px;
    padding-top: 20px;
}

.dropbtn {
background-color: #2e43b7;
color: #eaeff4;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-bottom-width: 10px;
    margin-bottom: 0px;
    padding-bottom: 24px;
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 20px;
}  

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #0B2161;
width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
text-align: center;
z-index: 1;
}

.dropright-content {
position: relative;
display: none;
background-color: #0B2161;
width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
text-align: center;
z-index: 1;
}

.self-button {
    position: flex;
    width: 120px;
    background: none;
    color: #eaeff4;
    border: none;
    padding: 12px 16px;
text-decoration: none;
display: block;
}

.self-button:hover {
background-color: #2e43b7;

} 

.self-button:hover .dropright-content {
display: block;
} 

.dropdown-content a {
color: #eaeff4;
padding: 12px 16px;
text-decoration: none;
display: block;

}  

.dropright-content a{
    color: #eaeff4;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropright-content a:hover{
    background-color: #2e43b7
}

.dropdown-content a:hover {
background-color: #2e43b7
} 

.dropdown:hover .dropdown-content {
display: block;
}  

.dropdown:hover .dropbtn {
background-color: #373ad4;
}

</style>
    </html>